<template>
  <div id="team">
    <van-search
        v-model="searchKeyWord"
        shape="round"
        background="#00bef8"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
    >
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>
    <van-tabs v-model:active="activeName" @change="onTabChange" style="margin-bottom: 5px">
      <van-tab title="公开队伍" name="0"></van-tab>
      <van-tab title="加密队伍" name="2"></van-tab>
    </van-tabs>

    <van-floating-bubble
        axis="xy"
        icon="plus"
        magnetic="x"
        v-model:offset="floatBubbleOffset"
        @click="doCreateTeam"
    />
    <div class="scroll-container" @scroll="handleScroll">
      <team-card-list :team-list="teamList"/>
      <van-empty v-if="!teamList || teamList.length < 1" image="search" description="暂无匹配队伍"/>
      <van-loading v-if="isLoading" color="#0094ff" size="24px">加载中...</van-loading>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import TeamCardList from "../../components/TeamCardList.vue";
import {onMounted, ref } from "vue";
import request from "../../plugins/request.ts";

const router = useRouter()
// 浮动气泡偏移量设置
const floatBubbleOffset = ref({ x: 300, y: 540})
const pageNum = ref(1);
const isLoading = ref(false)
const activeName = ref('0');
const doCreateTeam = () => {
  router.push({
    path: "/team/add",
  })
}
const teamList = ref([]);
// 页面加载时，向后端请求数据
onMounted(() => {
  isLoading.value = true
  getTeamList()
  isLoading.value = false
})
const getTeamList = async (val = '', status = 0) => {
  const result = await request.get("/team/list", {
    params: {
      searchText: val,
      "pageSize": 10,
      "status": status,
      pageNum: pageNum.value,
    }
  });
  if (result?.data.code === 200 && result.data.data) {
    teamList.value = result.data.data;
  } else {
    showFailToast('队伍加载失败，请刷新重试' + result.data.description);
  }
}

const searchKeyWord = ref('');
const status = ref(0)
const onSearch = () => {
  pageNum.value = 1;
  getTeamList(searchKeyWord.value)
};
const onClickButton = () => {
  pageNum.value = 1;
  getTeamList(searchKeyWord.value)
}
const onTabChange = (name) => {
  status.value = +name;
  pageNum.value = 1;
  getTeamList(searchKeyWord.value, +name);
}

/**
 * 实现页面滚动分页
 */
async function handleScroll(event: Event) {
  const {target} = event;
  const scrollContainer = target as HTMLElement;
  if (scrollContainer) {
    const {scrollTop, scrollHeight, clientHeight} = scrollContainer;
    if (scrollTop + clientHeight >= scrollHeight) { // 到达底部时加载更多
      pageNum.value++
      if (pageNum.value > 10) return;
      // 加载数据的函数
      const result = await request.get("/team/list", {
            params: {
              searchText: searchKeyWord.value,
              "pageSize": 10,
              "status": status.value,
              "pageNum": pageNum.value,
            }
          })
      ;
      if (result?.data.code === 200 && result.data.data) {
        teamList.value.push(...result.data.data);
      }
    }
  }
}
</script>

<style scoped>
.scroll-container {
  height: 465px; /* 或根据需要调整 */
  overflow-y: auto;
}
</style>